<template>
  <div class="container">
    <div class="operation">
      <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe @selection-change="handleSelectionChange" style="border-radius: 10px;" align="center">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="ordersNumber" label="订单编号" align="center"></el-table-column>
        <el-table-column label="商品名称" align="center">
          <template #default="scope">
            <a :href="'/front/detail?id=' + scope.row.goodsId" style="text-decoration: none; font-size: 18px;">{{ scope.row.goodsName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="goodsPhoto" label="商品图片" width="120px" align="center">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px;" v-if="scope.row.goodsPhoto" :src="scope.row.goodsPhoto" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNumber" label="商品数量" align="center"></el-table-column>
        <el-table-column prop="createTime" label="购买时间" width="180" align="center"></el-table-column>
        <el-table-column prop="price" label="价格" width="100" align="center" >
          <template #default="scope">
            <span style="color: #FF6700;">{{ scope.row.price }}元 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button size="mini" type="danger" plain @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout=" prev, pager, next"
                :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { findOrderByUserIdService, deleteShoppingHistoryService, batchDeleteOrderService } from '@/api/order'

const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const ordersNumber = ref('')
const selectedRows = ref([])

const fetchData = async () => {
  try {
    const params = { pageNum: pageNum.value, pageSize: pageSize.value, ordersNumber: ordersNumber.value }
    const response = await findOrderByUserIdService(params)
    tableData.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('获取购物历史列表失败')
  }
}

const confirmAction = (message: string, action: () => Promise<void>) => {
  ElMessageBox.confirm(message, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await action()
      ElMessage.success('操作成功')
      fetchData()
    } catch (error) {
      ElMessage.error('操作失败')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

const handleDelete = (id: number) => {
  confirmAction('确定要删除该购物历史吗？', () => deleteShoppingHistoryService(id))
}

const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的购物历史')
    return
  }
  confirmAction('确定要删除选中的购物历史吗？', () => batchDeleteOrderService(selectedRows.value.map(row => row.id)))
}

const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val
}

const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  fetchData()
}

const handleCurrentChange = (newPage: number) => {
  pageNum.value = newPage
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.operation {
  margin-bottom: 20px;
}

.table {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.el-button {
  margin: 0 5px;
}

.el-table {
  border-radius: 10px;
  font-size: 19px;
}

.el-pagination {
  border-radius: 10px;
  padding: 10px;
}
</style>